<template>
    <div>
        <div class="fcRightBox">
            <div class="one-loading-nested-loading one-loading-nested-loading-normal">
                <div class="one-loading-container">
                    <nav class="data-panel-home-upper">
                        <div class="kanban-title-row"><span class="kanban-title-row-main">新建报告</span><span
                                class="kanban-title-row-operation"><span class="kanban-title-row-operation-desc"><span>请选择数据来源</span><button
                                type="button" name=""
                                class="one-button one-main one-button-text-strong one-button-medium"><span>查看全部</span></button></span></span>
                        </div>
                        <div class="one-carousel data-panel-home-upper-buttons one-carousel-slider-button">
                            <div class="slick-slider slick-initialized" dir="ltr">

                                <div class="slick-list">
                                    <div class="slick-track"
                                         style="opacity: 1; transform: translate3d(0px, 0px, 0px); width: 4800px;display: flex">
                                        <div data-index="0" class="slick-slide slick-active slick-current" tabindex="-1"
                                             aria-hidden="false" style="outline: none; width: 192px;">
                                            <div>
                                                <a href="/fc/datacenter/dashboard/custom/fc/new/TABLE/user/50449389?reportType=26113971">
                                                    <button type="button" name=""
                                                            class="one-button brave-the-winds-common-libs-link-with-params one-main one-button-text-strong one-button-small">
                                                        <span><div class="data-panel-home-tab-button"><img
                                                                class="data-panel-home-tab-button-background"
                                                                src="https://tuiguang-s3.bdstatic.com/commonApps/static/media/buttonBG.35668856..svg"><div
                                                                class="data-panel-home-tab-button-title">跨表分析数据</div><div
                                                                class="data-panel-home-tab-button-operation">可查询时间：3个月</div><span
                                                                class="data-panel-home-tab-button-corner-tag">搜索</span></div></span>
                                                    </button>
                                                </a></div>
                                        </div>
                                        <div data-index="1" class="slick-slide slick-active" tabindex="-1"
                                             aria-hidden="false" style="outline: none; width: 192px;">
                                            <div>
                                                <a href="/fc/datacenter/dashboard/custom/fc/new/TABLE/user/50449389?reportType=22846181">
                                                    <button type="button" name=""
                                                            class="one-button brave-the-winds-common-libs-link-with-params one-main one-button-text-strong one-button-small">
                                                        <span><div class="data-panel-home-tab-button"><img
                                                                class="data-panel-home-tab-button-background"
                                                                src="https://tuiguang-s3.bdstatic.com/commonApps/static/media/buttonBG.35668856..svg"><div
                                                                class="data-panel-home-tab-button-title">广告基础数据</div><div
                                                                class="data-panel-home-tab-button-operation">可查询时间：27个月</div><span
                                                                class="data-panel-home-tab-button-corner-tag">搜索</span></div></span>
                                                    </button>
                                                </a></div>
                                        </div>
                                        <div data-index="2" class="slick-slide slick-active" tabindex="-1"
                                             aria-hidden="false" style="outline: none; width: 192px;">
                                            <div>
                                                <a href="/fc/datacenter/dashboard/custom/fc/new/TABLE/user/50449389?reportType=2602783">
                                                    <button type="button" name=""
                                                            class="one-button brave-the-winds-common-libs-link-with-params one-main one-button-text-strong one-button-small">
                                                        <span><div class="data-panel-home-tab-button"><img
                                                                class="data-panel-home-tab-button-background"
                                                                src="https://tuiguang-s3.bdstatic.com/commonApps/static/media/buttonBG.35668856..svg"><div
                                                                class="data-panel-home-tab-button-title">关键词数据</div><div
                                                                class="data-panel-home-tab-button-operation">可查询时间：27个月</div><span
                                                                class="data-panel-home-tab-button-corner-tag">搜索</span></div></span>
                                                    </button>
                                                </a></div>
                                        </div>
                                        <div data-index="3" class="slick-slide slick-active" tabindex="-1"
                                             aria-hidden="false" style="outline: none; width: 192px;">
                                            <div>
                                                <a href="/fc/datacenter/dashboard/custom/fc/new/TABLE/user/50449389?reportType=2307838">
                                                    <button type="button" name=""
                                                            class="one-button brave-the-winds-common-libs-link-with-params one-main one-button-text-strong one-button-small">
                                                        <span><div class="data-panel-home-tab-button"><img
                                                                class="data-panel-home-tab-button-background"
                                                                src="https://tuiguang-s3.bdstatic.com/commonApps/static/media/buttonBG.35668856..svg"><div
                                                                class="data-panel-home-tab-button-title">搜索词数据</div><div
                                                                class="data-panel-home-tab-button-operation">可查询时间：6个月</div><span
                                                                class="data-panel-home-tab-button-corner-tag">搜索</span></div></span>
                                                    </button>
                                                </a></div>
                                        </div>
                                        <div data-index="4" class="slick-slide slick-active" tabindex="-1"
                                             aria-hidden="false" style="outline: none; width: 192px;">
                                            <div>
                                                <a href="/fc/datacenter/dashboard/custom/fc/new/TABLE/user/50449389?reportType=9718404">
                                                    <button type="button" name=""
                                                            class="one-button brave-the-winds-common-libs-link-with-params one-main one-button-text-strong one-button-small">
                                                        <span><div class="data-panel-home-tab-button"><img
                                                                class="data-panel-home-tab-button-background"
                                                                src="https://tuiguang-s3.bdstatic.com/commonApps/static/media/buttonBG.35668856..svg"><div
                                                                class="data-panel-home-tab-button-title">人群数据</div><div
                                                                class="data-panel-home-tab-button-operation">可查询时间：27个月</div><span
                                                                class="data-panel-home-tab-button-corner-tag">搜索</span></div></span>
                                                    </button>
                                                </a></div>
                                        </div>
                                        </div>
                                </div>

                            </div>
                        </div>
                    </nav>
                </div>
            </div>
            <div class="fcHeader-container fcHeader-container-custom-dash">
                <div class="">
                    <div class="contentHeader">
                        <el-input placeholder="请搜索关键词/网址" style="width: 200px" v-model="form.originality"
                                  @change="queryList">  <i slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
                      <div class="contentHeader_right" style="justify-content: flex-end">
                        <el-dropdown @command="handleCommand" trigger="click" style="margin-right: 16px">
                          <el-button style="width: 160px;padding: 6px;text-align: left">
                            <span style="display:inline-block;width: 120px;color: rgba(19, 22, 26, 0.9);font-size: 12px"> <i v-if="!selectedDivision">细分</i><i v-else>细分：</i>{{ selectedDivision }}</span> <i class="el-icon-arrow-down el-icon--right" style="color: rgba(19, 22, 26, 0.9)"> </i>
                          </el-button>
                          <!-- 第一层子菜单 -->
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="hour">小时</el-dropdown-item>
                            <el-dropdown-item command="purchase">购买方式</el-dropdown-item>
                            <el-dropdown-item command="device">推广设备</el-dropdown-item>
                            <el-dropdown-submenu>
                              <template slot="title">地域</template>
                              <!-- 第二层子菜单 -->
                              <el-dropdown-item command="province">分省</el-dropdown-item>
                              <el-dropdown-item command="city">分地市</el-dropdown-item>
                            </el-dropdown-submenu>
                          </el-dropdown-menu>
                        </el-dropdown>
                        <el-button class="rightBt" style="padding: 6px 12px;margin-right: 8px;" @click="handleTabClick">重置列宽</el-button>

                      </div>
                    </div>
                    <el-table
                            :data="tableList"
                            style="width: 100%;background: #EBEDF5"
                            :default-sort="{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="promotionPlan"
                                label="推广计划"
                                sortable
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="promotionUnit"
                                label="推广单元"
                                sortable
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="promotionPlan"
                                label="推广计划">

                        </el-table-column>
                        <el-table-column
                                prop="originality"
                                label="关键词/网址">

                        </el-table-column>
                        <el-table-column
                                prop="aboveAvgRanking"
                                label="上方位平均排名">

                        </el-table-column>
                        <el-table-column
                                prop="avgClickPrice"
                                label="平均点击价格"
                                sortable
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="offer"
                                label="出价"
                                sortable
                                min-width="180">
                        </el-table-column>
                        <el-table-column
                                prop="matchPattern"
                                label="匹配模式"
                        >
                        </el-table-column>

                    </el-table>
                  <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import ItemMixins from "./item.mixins";
    import * as echarts from 'echarts';
    import {dataKaleReportList} from '@/services/model/datacenter'

    export default {
        mixins: [ItemMixins],
        data() {
            return {

                form: {realtimeType: '关键词实时消费'},
                isToggleStatus: false,

                chart: null,
                value: '下载',
                sumTypeList: [{
                    value: '消费',
                    label: '消费'
                }, {
                    value: '展示',
                    label: '展示'
                }, {
                    value: '点击',
                    label: '点击'
                }, {
                    value: '平均点击价格',
                    label: '平均点击价格'
                }],
                options2: [{
                    value: '下载',
                    label: '下载'
                }, {
                    value: '发送邮箱',
                    label: '发送邮箱'
                }],
                options: [{
                    value: 0,
                    label: '合计'
                }, {
                    value: 1,
                    label: '分时'
                }, {
                    value: 2,
                    label: '分日'
                }, {
                    value: 3,
                    label: '分周'
                }, {
                    value: 4,
                    label: '分月'
                }],
                isSelect: '账户整体',
                activeName: '整体走势',

            };
        },
        methods: {
            async queryList() {
              this.tableList=[]
                this.form.createTime = this.timerArray[0]
                this.form.updateTime = this.timerArray[1]

                let res = await dataKaleReportList(this.form)
              const modifiedArray = this.replaceNullWithDash( res.rows);
              this.tableList = modifiedArray|| []

                 this.form.total = Math.ceil(Number(res.total) );
            },

            initChart() {
                this.chart = echarts.init(this.$refs.chart);
                this.chart.setOption({
                    title: {
                        text: 'TOP5计算结果'
                    },
                    tooltip: {},
                    legend: {
                        data: ['网站流量', '搜索引擎']
                    },
                    xAxis: {  axisTick: {
            show: false // 隐藏X轴刻度
          },
                        data: ["2023-10-29", "2023-11-21", "2023-12-08", "2023-12-25"]
                    },
                     yAxis: {},   symbol: 'none' ,    // 确保数据点完全隐藏
                    series: [{ lineStyle: {
            color: '#00aaff'  // 设置线条颜色
          },
            itemStyle: {
            color: '#00aaff'  // 设置线条颜色
          },showSymbol: false,
                        name: '计算结果',
                        type: 'line',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        mounted() {
            this.queryList()
        },
    };
</script>
<style>
</style>
<style scoped lang="less">
    .data-panel-home-tab-button{

        text-transform: none;
        font-weight: 400;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        user-select: none;
        white-space: nowrap;
        line-height: inherit;
        margin: 0;
        display: flex;
        box-sizing: border-box;
        text-align: left;
        width: 180px;
        height: 90px;
        padding: 16px;
        position: relative;
        border-radius: 6px;
        font-size: 14px;
        background: #f2f7ff;
        border: 1px solid #f2f7ff;
        color: #000;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        transition: all 0.2s linear;
        outline: none;
    }
    .data-panel-home-tab-button-background{
        text-transform: none;
        font-weight: 400;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        user-select: none;
        white-space: nowrap;
        line-height: inherit;
        text-align: left;
        font-size: 14px;
        color: #000;
        cursor: pointer;
        padding: 0;
        box-sizing: var(--light-ai-box-sizing, border-box);
        border-style: none;
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        margin: auto;
    }
    .data-panel-home-tab-button-title{
        text-transform: none;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        user-select: none;
        white-space: nowrap;
        line-height: inherit;
        text-align: left;
        color: #000;
        cursor: pointer;
        padding: 0;
        margin: 0;
        box-sizing: var(--light-ai-box-sizing, border-box);
        font-size: 16px;
        font-weight: 500;
        outline: none;
    }
    .data-panel-home-tab-button-operation{
        text-transform: none;
        font-weight: 400;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        user-select: none;
        white-space: nowrap;
        line-height: inherit;
        text-align: left;
        cursor: pointer;
        padding: 0;
        margin: 0;
        box-sizing: var(--light-ai-box-sizing, border-box);
        font-size: 12px;
        color: #545b66;
        outline: none;
    }
   .data-panel-home-tab-button-corner-tag{

       text-transform: none;
       font-weight: 400;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
       user-select: none;
       white-space: nowrap;
       line-height: inherit;
       text-align: left;
       font-size: 14px;
       cursor: pointer;
       margin: 0;
       box-sizing: var(--light-ai-box-sizing, border-box);
       position: absolute;
       top: 0;
       right: 0;
       padding: 2px 4px;
       color: #0052cc;
       background-color: #f2f7ff;
   }
    .data-panel-home-upper-buttons {
        margin-top: 16px;
    }
    .one-carousel .slick-slider {
        position: relative;
        display: block;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }
    .one-loading-container {
        transition: all 300ms linear;

        .data-panel-home-upper {
            padding: 24px;
            background-color: #fff;
            border-radius: 4px;
            font-size: 14px;

            .kanban-title-row {
                display: flex;
            }

            .kanban-title-row-main {
                font-size: 16px;
                font-weight: 500;
            }

            .kanban-title-row-operation {
                flex: 1;
                margin-left: 8px;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
            }
        .kanban-title-row-operation-desc {
                font-size: 14px;
                color: #848b99;
            }
        }
    }

    .fcRightBox {
        height: 100%;
        width: calc(100vw - 240px);

        .fcHeader {
            background: #fff;
            border-radius: 6px;
            padding: 16px 24px 20px;
            margin-bottom: 24px;

            .fcHeader-title-container {

                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;

                .left-part {

                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    .title {
                        font-size: 20px;
                        color: #282c33;
                    }

                    .refresh-data-time {
                        display: inline-block;
                        margin-bottom: 4px;
                    }

                }

                .right-part {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    .baidu-market-tip {
                        color: #a8b0bf;
                        font-size: 12px;

                        .baidu-market-name {
                            color: #0052cc;
                        }
                    }

                    .fcHeader-date-pick-container {
                        margin-left: 12px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        align-items: center;

                        /deep/ .el-checkbox {
                            margin-left: 12px;
                        }
                    }
                }
            }
        }

        .fcHeader-container-custom-dash {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }

        .fcHeader-container {
            position: relative;
            background: #fff;
            border-radius: 6px;
            padding: 24px;
            padding-top: 12px;

            .fcHeader-container-title-box {
                position: absolute;
                right: 24px;
                top: 20px;
                height: 28px;
                display: flex;
                align-items: center;

                .fcHeader-container-title-tip {
                    font-size: 12px;
                    color: #a8b0bf;
                    z-index: 9;
                }
            }
        }

        .account-report-radio-container {
            width: calc(100% - 48px);
            display: flex;

            overflow: auto;

            .account-report-radio-card {
                min-width: 208px;
                padding: 12px 16px;
                border-radius: 6px;
                border: 1px solid #c4daff;
                background: #fff;
                margin-right: 16px;
                cursor: pointer;
                color: #545b66;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;

                .account-report-radio-card-base {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .account-report-radio-card-base-cost {
                        display: flex;
                        align-items: center;
                        color: #282c33;
                        font-weight: 500;

                        .account-report-radio-card-base-cost-num {
                            font-size: 20px;
                            line-height: 28px;
                            margin: 0 4px;
                        }
                    }
                }
            }

            .account-report-radio-card-selected {
                border: 1px solid #0054e6;
                color: #0054e6;

                .account-report-radio-card-base-cost {
                    color: #0054e6;
                }
            }

        }
    }
</style>
<style scoped>
    .dashboard .box-card {
        margin-bottom: 20px;
    }

    .dashboard .text-item {
        padding: 20px 0;
        text-align: center;
    }

    .dashboard .number {
        font-size: 24px;
        color: #333;
    }

    .dashboard .change {
        font-size: 14px;
        color: #333;
    }

    .dashboard .change el-icon {
        color: #67C23A;
    }

    .chart {
        width: 100%;
    }

    .contentHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

    }

    .contentHeader_right {
  min-width: 300px;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }
</style>
